diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2022-09-20 22:10:01 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-09-20 22:10:01 +0200 |
| commit | f7ba5cd9bbf1f4d145c3d3d171c2632d44b5f94a (patch) | |
| tree | 855256f27ded3cf0ec662119dbf26c3b138a8f5b /opendc-web/opendc-web-ui/src/pages/projects/[project] | |
| parent | 48d43a83f675db8f5f13755081e56b3cde1a7207 (diff) | |
| parent | 86bc9e74630374853d11bc1c8f7ba5ffafbaa868 (diff) | |
merge: Improve web interface (#100)
This pull request addresses several issues with the current web interface.
## Implementation Notes :hammer_and_pick:
* Update dependencies of web UI where possible
* Fix deletion of topology
* Fix duplication of topology
* Only display selected metrics
* Use correct color for login button
* Fix z-index of context selector
* Move project selector into masthead
* Reduce height of application header
* Redesign projects page
* Use PatternFly Charts for plots
* Do not fail on stale Redux state
* Fix overflow of topology sidebar
* Fix deletion of portfolios
* Migrate to composable table
## External Dependencies :four_leaf_clover:
* `classnames` has been replaced by `clsx`
* PatternFly Charts have replaced the use of `recharts`
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]')
3 files changed, 4 insertions, 17 deletions
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js index 39fcb4f3..e4e2156b 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js @@ -21,9 +21,7 @@ */ import { useRouter } from 'next/router' -import ContextSelectionSection from '../../../components/context/ContextSelectionSection' import ProjectOverview from '../../../components/projects/ProjectOverview' -import ProjectSelector from '../../../components/context/ProjectSelector' import { useProject } from '../../../data/project' import { AppPage } from '../../../components/AppPage' import Head from 'next/head' @@ -55,14 +53,8 @@ function Project() { </Breadcrumb> ) - const contextSelectors = ( - <ContextSelectionSection> - <ProjectSelector activeProject={project} /> - </ContextSelectionSection> - ) - return ( - <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}> + <AppPage breadcrumb={breadcrumb}> <Head> <title>{project?.name ?? 'Project'} - OpenDC</title> </Head> diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js index 68345d0b..615529e7 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js @@ -40,12 +40,11 @@ import { import { AppPage } from '../../../../components/AppPage' import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' import PortfolioSelector from '../../../../components/context/PortfolioSelector' -import ProjectSelector from '../../../../components/context/ProjectSelector' import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview' import { usePortfolio } from '../../../../data/project' -const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults')) +const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'), { ssr: false }) /** * Page that displays the results in a portfolio. @@ -59,7 +58,6 @@ function Portfolio() { const resultsRef = useRef(null) const { data: portfolio } = usePortfolio(projectId, portfolioNumber) - const project = portfolio?.project const breadcrumb = ( <Breadcrumb> @@ -81,7 +79,6 @@ function Portfolio() { const contextSelectors = ( <ContextSelectionSection> - <ProjectSelector activeProject={project} /> <PortfolioSelector activePortfolio={portfolio} /> </ContextSelectionSection> ) @@ -96,7 +93,7 @@ function Portfolio() { <Text component="h1">Portfolio</Text> </TextContent> </PageSection> - <PageSection type="none" variant={PageSectionVariants.light} className="pf-c-page__main-tabs" sticky="top"> + <PageSection type="tabs" variant={PageSectionVariants.light} stickyOnBreakpoint={{ default: 'top' }}> <Divider component="div" /> <Tabs defaultActiveKey={0} className="pf-m-page-insets"> <Tab diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index 6297b8c3..d3892710 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -23,7 +23,6 @@ import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' -import ProjectSelector from '../../../../components/context/ProjectSelector' import TopologySelector from '../../../../components/context/TopologySelector' import TopologyOverview from '../../../../components/topologies/TopologyOverview' import { useDispatch } from 'react-redux' @@ -48,7 +47,7 @@ import { useTopology } from '../../../../data/topology' import { goToRoom } from '../../../../redux/actions/interaction-level' import { openTopology } from '../../../../redux/actions/topology' -const TopologyMap = dynamic(() => import('../../../../components/topologies/TopologyMap')) +const TopologyMap = dynamic(() => import('../../../../components/topologies/TopologyMap'), { ssr: false }) /** * Page that displays a datacenter topology. @@ -90,7 +89,6 @@ function Topology() { const contextSelectors = ( <ContextSelectionSection> - <ProjectSelector activeProject={project} /> <TopologySelector activeTopology={topology} /> </ContextSelectionSection> ) |